<template>
    <div class="Category">
        <!-- {{ goods }} -->
        <div class="goods" v-for="(item,index) in goods"
        :key="index"
        @click="toGoodsDetail(item.sku_id)"
        >
            <div class="first-row">
                <img :src="item.image" alt="">
            </div>
            <div class="second-row dian2">
                {{ item.name }}
            </div>
            <div class="third-row">
                <small>&yen;</small>
                <span>{{ item.jd_price }}</span>
            </div>
        </div>
    </div>
</template>

<script setup>
    import { ref,onMounted,watch } from 'vue'
    import { getCategoryGoods } from '@/network/home'
    import { toGoodsDetail } from '@/utils/goods'

    let categoryId = defineProps(['categoryId'])
    let goods = ref([])
    //用来存储现在是多少页
    let page = ref(1)
    const getCategoryGoodsData = async (categoryId,page) => {
        const { data } = await getCategoryGoods(categoryId,page)
        let serverData = data
        
        for(let i in serverData) {
            let jsonData = JSON.parse(serverData[i])
            goods.value.push(jsonData)
        }
    }


    watch(categoryId,(newValue,oldValue) => {
        goods.value = []
        getCategoryGoodsData(newValue.categoryId,1)
        page.value = 1
    })

    const windowScroll = () => {
        //可视区域的高度
        let clientHeight = document.documentElement.clientHeight
        //滚动条在文档中的高度(滚出可见区域的高度)
        let scrollTop = document.documentElement.scrollTop
        //所有内容的高度
        let scrollHeight = document.body.scrollHeight

        if(clientHeight + scrollTop >= scrollHeight) {
            page.value += 1;
            getCategoryGoodsData(categoryId.categoryId,page.value)
        }
    }

    //增加事件监听器（鼠标滚动事件）
    window.addEventListener('scroll',windowScroll)

    onMounted(() => {   
        getCategoryGoodsData(1,1)
    })
</script>

<style lang="less" scoped>
    .Category {
        width: var(--content-width);
        margin: 0 auto;
        display: flex;
        flex-wrap:wrap ;
        margin-top: 10px;
        justify-content: space-between;
        // border: 1px solid;
        .goods {
            text-align: center;
            width: 230px;
            height: 320px;
            background-color: #fff;
            margin-bottom: 10px;
            // &:not(:last-child) {
            //     margin-right: 10px;
            // }
            .first-row {
                height: 210px;
                line-height: 210px;
                text-align: center;
                img {
                    width: 150px;
                    height: 150px;
                }
            }
            .second-row {
                // border: 1px solid;
                width: 190px;
                height: 40px;
                line-height: 20px;
                font-size: 12px;
                color: #666;
                margin: 0 auto;

                &:hover {
                cursor:pointer;
                color:#c81623;
                }
            }
            .third-row {
                color:#c81623;
                width: 190px;
                text-align: left;
                padding-left: 20px;
                
                span {
                    font-weight: 700;
                    font-size: 20px;
                }
                margin-top: 20px;
            }

        }
    }
</style>